<!-- 高级查询抽屉组件（上） -->
<script setup>
import {defineProps, defineEmits, ref} from 'vue'

// 接收父组件的参数
const props = defineProps({
    visible: {type: Boolean, default: true}, // 控制抽屉显示/隐藏
    title: {type: String, default: '操作'}, // 抽屉标题
    size: {type: Number, default: 375}, // 抽屉宽度
})

// 向父组件发送事件
const emit = defineEmits(['update:visible', 'query'])

// 关闭抽屉：通知父组件更新visible状态
const handleClose = () => {
    emit('update:visible', false)
}

// 点击确定按钮：通知父组件执行提交逻辑
const handleQuery = () => {
    emit('query', queryData.value)
}

const queryData = ref({
    orderNumber: "", // 排序码
    tenantId: "", // 租户ID
    applicationId: "", // 租户系统ID
    deleted: "", // 删除状态
    deleteUserId: "", // 删除人ID
    startDeleteTime: "", // 删除时间_开始时间
    endDeleteTime: "", // 删除时间_结束时间
    createUserId: "", // 创建人ID
    startCreateTime: "", // 创建时间_开始时间
    endCreateTime: "", // 创建时间_结束时间
    updateUserId: "", // 更新人ID
    startUpdateTime: "", // 更新时间_开始时间
    endUpdateTime: "", // 更新时间_结束时间
    status: "", // 数据状态
    remark: "", // 更新说明
    extend1: "", // 扩展字段1
    extend2: "", // 扩展字段2
    extend3: "", // 扩展字段3
    datePicker: ""
})

const labelPosition = ref("top")

</script>

<!-- 公共抽屉组件：只处理基础UI和显示状态 -->
<template>
    <el-drawer :model-value="visible" :title="title" :size="size" direction="ttb" @close="handleClose">
        <template #header>

        </template>
        <!-- 插槽：接收外部传入的内容（如AddForm组件） -->
        <slot name="queryParam"></slot>
        <el-input v-model="queryData.orderNumber" style="width: 240px" placeholder="请输入排序码"/>
        <el-input v-model="queryData.tenantId" style="width: 240px" placeholder="请输入租户ID"/>
        <el-input v-model="queryData.applicationId" style="width: 240px" placeholder="请输入租户系统ID"/>
        <el-input v-model="queryData.deleted" style="width: 240px" placeholder="请输入删除状态"/>
        <el-input v-model="queryData.deleteUserId" style="width: 240px" placeholder="请输入删除人ID"/>
        <el-input v-model="queryData.startDeleteTime" style="width: 240px" placeholder="请输入删除时间_开始时间"/>
        <el-input v-model="queryData.endDeleteTime" style="width: 240px" placeholder="请输入删除时间_结束时间"/>
        <el-date-picker
            v-model="queryData.datePicker"
            type="datetimerange"
            range-separator="-"
            start-placeholder="删除开始时间"
            end-placeholder="结束时间"
        />
        <el-input v-model="queryData.createUserId" style="width: 240px" placeholder="请输入创建人ID"/>
        <el-input v-model="queryData.startCreateTime" style="width: 240px" placeholder="请输入创建时间_开始时间"/>
        <el-input v-model="queryData.endCreateTime" style="width: 240px" placeholder="请输入创建时间_结束时间"/>
        <el-input v-model="queryData.updateUserId" style="width: 240px" placeholder="请输入更新人ID"/>
        <el-input v-model="queryData.startUpdateTime" style="width: 240px" placeholder="请输入更新时间_开始时间"/>
        <el-input v-model="queryData.endUpdateTime" style="width: 400px" placeholder="请输入更新时间_结束时间"/>
        <el-input v-model="queryData.status" style="width: 240px" placeholder="请输入数据状态"/>
        <el-input v-model="queryData.remark" style="width: 240px" placeholder="请输入更新说明"/>
        <el-input v-model="queryData.extend1" style="width: 240px" placeholder="请输入扩展字段1"/>
        <el-input v-model="queryData.extend2" style="width: 240px" placeholder="请输入扩展字段2"/>
        <el-input v-model="queryData.extend3" style="width: 240px" placeholder="请输入扩展字段3"/>
        <!-- 底部按钮区域：也可通过插槽自定义，或保持通用 -->
        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <!-- 提交按钮：点击后通知父组件处理业务逻辑 -->
            <el-button type="primary" @click="handleQuery">确定</el-button>
        </template>
    </el-drawer>
</template>

<style scoped lang="sass">

</style>
